<template>
  <div class="player">
    <div class="left">
      <img class="disc" src="../assets/img/disc.png" alt="" />
      <img class="cover" :src="gequfengmian" alt="" />
    </div>
    <div class="right">
      <div class="title">
        <img src="../assets/img/tag.png" alt="" /><span>{{geming}}</span>
      </div>
      <div class="singer">歌手: <span>{{geshou}}</span></div>
      <div class="album">所属专辑: <span>{{suoshuzhuanji}}</span></div>
      <audio class="audio" controls :src="bofang" autoplay></audio>
      <ul class="lyric-container">
        <li class="lyric" v-for="(item,index) in geci" :key="'geci'+index">{{item.split("]")[1]}}</li>
      </ul>
    </div>
  </div>
</template>

<script>
// import oneSongLrc from "../mockdatas/oneSongLrc";

export default {
  data(){
    return {
      // 歌名
      geming:'',
      // 歌手
      geshou:'',
      // 所属专辑
      suoshuzhuanji:'',
      // 歌曲封面
      gequfengmian:'',
      // 播放路径
      bofang:'',
      // 歌词
      geci:[]
   }
  },
  async created(){
    if(!this.$route.params.id){
      alert('未检出歌曲id信息')
      // 后退一步
      window.history.back(-1)
      return
    }
    // 音乐路径
    let res=await this.$axios.get("/song/url?id=" + this.$route.params.id)
    // console.log(res)
    this.bofang=res.data.data[0].url
    // 歌词
    let ser=await this.$axios.get("/lyric?id=" + this.$route.params.id)
    // console.log(ser)
    // console.log(ser.data.lrc.lyric)
    let ee=ser.data.lrc.lyric
    let aa=ee.split('\n')
    this.geci=aa
    // data.result.songs
    // console.log(ser.data.lyricUser.nickname)
    let sre=await this.$axios.get("/song/detail?ids=" + this.$route.params.id)
    console.log(sre)
    this.geming=sre.data.songs[0].name
    this.suoshuzhuanji=sre.data.songs[0].al.name
    this.geshou=sre.data.songs[0].ar[0].name
    this.gequfengmian=sre.data.songs[0].al.picUrl
   }
};
</script>

<style scoped>
@import "@/assets/css/player.css";
</style>